import React from 'react'
import { Card, Typography, Space, Tag, Button, Dropdown, Image } from 'antd'
import { 
  EditOutlined, 
  DeleteOutlined, 
  CopyOutlined, 
  MoreOutlined,
  PlayCircleOutlined,
  ClockCircleOutlined,
  UserOutlined,
  AppstoreOutlined
} from '@ant-design/icons'
import type { MenuProps } from 'antd'
import { StoryboardScene } from '../../../types/document'

const { Text, Paragraph } = Typography

export interface SceneCardProps {
  scene: StoryboardScene
  index: number
  isSelected?: boolean
  isDragging?: boolean
  onSelect?: (sceneId: string) => void
  onEdit?: (sceneId: string) => void
  onDelete?: (sceneId: string) => void
  onDuplicate?: (sceneId: string) => void
  onPreview?: (sceneId: string) => void
}

/**
 * 场景卡片组件
 * 显示场景基本信息，支持选择、编辑、删除等操作
 */
export const SceneCard: React.FC<SceneCardProps> = ({
  scene,
  index,
  isSelected = false,
  isDragging = false,
  onSelect,
  onEdit,
  onDelete,
  onDuplicate,
  onPreview
}) => {
  // 获取场景缩略图
  const getThumbnail = () => {
    if (scene.visual?.storyboardImage) {
      return scene.visual.storyboardImage
    }
    return null
  }

  // 获取场景时长显示文本
  const getDurationText = () => {
    const duration = scene.timing?.duration || scene.duration || 0
    if (duration < 60) {
      return `${duration.toFixed(1)}秒`
    } else {
      const minutes = Math.floor(duration / 60)
      const seconds = Math.floor(duration % 60)
      return `${minutes}分${seconds}秒`
    }
  }

  // 获取地点显示文本
  const getLocationText = () => {
    if (scene.sceneLocation?.name) {
      return scene.sceneLocation.name
    }
    return scene.location || '未设置地点'
  }

  // 获取时间显示文本
  const getTimeText = () => {
    if (scene.sceneLocation?.lighting) {
      const lightingMap = {
        natural_day: '白天',
        natural_night: '夜晚',
        natural_dawn: '黎明',
        natural_dusk: '黄昏',
        artificial_bright: '强光',
        artificial_dim: '昏暗',
        mixed: '混合'
      }
      return lightingMap[scene.sceneLocation.lighting] || '未设置'
    }
    return '未设置'
  }

  // 获取角色数量
  const getCharacterCount = () => {
    return scene.elements?.characters?.length || 0
  }

  // 获取道具数量
  const getPropCount = () => {
    return scene.elements?.props?.length || 0
  }

  // 下拉菜单项
  const menuItems: MenuProps['items'] = [
    {
      key: 'edit',
      label: '编辑场景',
      icon: <EditOutlined />,
      onClick: () => onEdit?.(scene.id)
    },
    {
      key: 'duplicate',
      label: '复制场景',
      icon: <CopyOutlined />,
      onClick: () => onDuplicate?.(scene.id)
    },
    {
      key: 'preview',
      label: '预览场景',
      icon: <PlayCircleOutlined />,
      onClick: () => onPreview?.(scene.id)
    },
    {
      type: 'divider'
    },
    {
      key: 'delete',
      label: '删除场景',
      icon: <DeleteOutlined />,
      danger: true,
      onClick: () => onDelete?.(scene.id)
    }
  ]

  const cardClass = [
    'scene-card',
    isSelected && 'scene-card--selected',
    isDragging && 'scene-card--dragging'
  ].filter(Boolean).join(' ')

  return (
    <Card
      className={cardClass}
      variant="borderless"
      styles={{
        body: { padding: 0 }
      }}
      cover={
        <div className="scene-card__thumbnail">
          {getThumbnail() ? (
            <Image
              src={getThumbnail()}
              alt={`场景 ${scene.order + 1} 缩略图`}
              preview={false}
              style={{ 
                width: '100%', 
                height: '140px', 
                objectFit: 'cover' 
              }}
            />
          ) : (
            <div className="scene-card__placeholder">
              <AppstoreOutlined style={{ fontSize: '32px', color: '#d9d9d9' }} />
              <Text type="secondary">暂无缩略图</Text>
            </div>
          )}
          <div className="scene-card__overlay">
            <Tag color="blue" className="scene-card__index">
              场景 {String(scene.order + 1).padStart(2, '0')}
            </Tag>
            <Dropdown
              menu={{ items: menuItems }}
              trigger={['click']}
              placement="bottomRight"
            >
              <Button
                type="text"
                icon={<MoreOutlined />}
                className="scene-card__menu-btn"
                onClick={(e) => e.stopPropagation()}
              />
            </Dropdown>
          </div>
        </div>
      }
      onClick={() => onSelect?.(scene.id)}
    >
      <div className="scene-card__content">
        <div className="scene-card__header">
          <Text strong className="scene-card__title">
            {scene.title || `场景 ${scene.order + 1}`}
          </Text>
          <Tag icon={<ClockCircleOutlined />} color="default" size="small">
            {getDurationText()}
          </Tag>
        </div>
        
        <Paragraph 
          className="scene-card__description"
          ellipsis={{ rows: 2, tooltip: true }}
          type="secondary"
        >
          {scene.description || scene.content || '暂无描述'}
        </Paragraph>

        <div className="scene-card__info">
          <Space size="small">
            <Text type="secondary" className="scene-card__location">
              {getLocationText()} - {getTimeText()}
            </Text>
          </Space>
        </div>

        <div className="scene-card__stats">
          <Space size="middle">
            <Space size="small">
              <UserOutlined style={{ color: '#666' }} />
              <Text type="secondary">{getCharacterCount()}人</Text>
            </Space>
            <Space size="small">
              <AppstoreOutlined style={{ color: '#666' }} />
              <Text type="secondary">{getPropCount()}道具</Text>
            </Space>
          </Space>
        </div>
      </div>
    </Card>
  )
}

export default SceneCard